<!DOCTYPE html>
<html lang="en">
<style type="text/css">
	span{background-color: yellow;}
</style>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<p>曾经有一段真挚的爱情我没有珍惜， 等到失去的时候才后悔莫及。曾经有一段真挚的爱情我没有珍惜，等到失去的时候才后悔莫及。曾经有一段真挚的爱情我没有珍惜， 等到失去的时候才后悔莫及。曾经有一段真挚的爱情我没有珍惜，等到失去的时候才后悔莫及。<br>曾经有一段真挚的爱情我没有珍惜，等到失去的时候才后悔莫及。曾经有一段真挚的爱情我没有珍惜，等到失去的时候才后悔莫及。曾经有一段真挚的爱情我没有珍惜，等到失去的时候才后悔莫及。</p>
<input type="text">
<input type = "button" value="查找"><br><br>
<input type="text">
<input type = "button" value="替换">

<script type="text/javascript">
	var oP = document.getElementsByTagName('p')[0];
	var aInp = document.getElementsByTagName('input');
	var aSpan = document.getElementsByTagName('span');
	var textContent = oP.innerHTML;
	//查找
	aInp[1].onclick = function(){
		var str1 = aInp[0].value;
		var findText = textContent;
		if (!str1) return;				//防止没输入空字符串
		
		oP.innerHTML = findText.split(str1).join('<span class="span1">'+str1+'</span>');
		console.log(oP.innerHTML)
	}
	//替换
	aInp[3].onclick = function(){
		var str1 = aInp[0].value;
		var str2 = aInp[2].value;
		if (!str1 || !str2) return;				//防止没输入空字符串
		oP.innerHTML = oP.innerHTML.split(str1).join('<span class="span1">'+str2+'</span>');
		textContent = oP.innerHTML
	}
</script>
</body>
</html>